<template>
  <div id="manipulateview">
    <template v-if="cell">
      <template v-if="type === 'node'">
        <div v-if="describeEdit">
          <a-row class="textCenter">
            <a-col :span="12"> 修改节点文本： </a-col>
            <a-col :span="12">
              <a-input :value="editText" @input="editCellText"></a-input>
            </a-col>
          </a-row>
          <a-row class="textCenter">
            <a-col :span="12"> 修改文本大小 </a-col>
            <a-col :span="12" class="rangeInput">
              <a-input
                type="range"
                v-model="nodeTextFontSize"
                :max="30"
                :min="14"
                @input="changeNodeTextFontSize"
              >
              </a-input>
              <span>{{ nodeTextFontSize }}px</span>
              <!-- <a-select v-model="nodeTextFontSize" style="width: 100%" @change="changeNodeTextFontSize">
                <a-select-option :value="16">16</a-select-option>
                <a-select-option :value="17">17</a-select-option>
                <a-select-option :value="18">18</a-select-option>
                <a-select-option :value="19">19</a-select-option>
                <a-select-option :value="20">20</a-select-option>
              </a-select> -->
            </a-col>
          </a-row>
        </div>
        <div v-if="adapterNode">
          端点
          <!-- <a-button>创建边</a-button> -->
        </div>
      </template>
      <template v-else-if="type === 'edge'">
        <div v-if="linkEdge">
          <a-row>
            <a-col :span="24"> 修改连接到边的位置: </a-col>
          </a-row>
          <a-row>
            <a-col class="rangeInput" :span="24">
              <a-input
                type="range"
                v-model="Range"
                @input="rangeInput"
                :max="100"
                :min="0"
              ></a-input>
              <span>{{ Range }}%</span>
            </a-col>
          </a-row>
        </div>
        <!-- edge -->
        <a-row class="textCenter">
          <a-col :span="12">修改箭头样式:</a-col>
          <a-col :span="12">
            <a-select
              @change="handleGraph($event, 'edgeArrow')"
              style="width: 100%"
              v-model="arrowType"
            >
              <a-select-option
                v-for="item in arrowTypeList"
                :key="item.value"
                :value="item.value"
              >
                {{ item.label }}
              </a-select-option>
            </a-select>
          </a-col>
        </a-row>
      </template>
      <template v-else-if="type === 'textnode'">
        <div>
          <a-row>
            <a-col :span="24">文本字号:</a-col>
          </a-row>
          <a-row>
            <a-col class="rangeInput" :span="24">
              <a-input
                type="range"
                :min="12"
                :max="24"
                v-model="fontSize"
                @input="handleGraph($event, 'fontSize')"
              ></a-input>
              <span>{{ fontSize }}px</span>
            </a-col>
          </a-row>
          <a-row class="textCenter">
            <a-col :span="12">显示边框:</a-col>
            <a-col :span="12">
              <a-switch
                v-model="textNodeBorder"
                @change="handleGraph($event, 'textBorder')"
              ></a-switch>
            </a-col>
          </a-row>
        </div>
      </template>
    </template>
    <template v-else>
      <div class="itemList">
        <div class="item">
          <a-popconfirm
            placement="leftBottom"
            ok-text="确定"
            cancel-text="取消"
            @confirm="handleGraph($event, 'clear')"
          >
            <template slot="title"> 是否清空画布？ </template>
            <a-button type="primary">清空画布</a-button>
          </a-popconfirm>
        </div>
        <div class="item">
          <!-- <a-row>
            <a-col :span="12">背景颜色：</a-col>
            <a-col :span="12">
              <a-input
                type="color"
                default-value="#000000"
                @input="handleGraph($event, 'bgcolor')"
              ></a-input>
            </a-col>
          </a-row> -->
        </div>
        <div class="item">
          <a-row>
            <a-col :span="12">背景样式</a-col>
            <a-col :span="12">
              <a-select
                @change="handleGraph($event, 'bgtype')"
                style="width: 100%"
                v-model="graphGridType"
              >
                <a-select-option
                  v-for="item in bgtypeList"
                  :key="item.value"
                  :value="item.value"
                >
                  {{ item.label }}
                </a-select-option>
              </a-select>
            </a-col>
          </a-row>
        </div>
      </div>
    </template>
  </div>
</template>
<script>
import { bgtypeList, arrowTypeList } from "./typesList";
export default {
  name: "Manipulate",
  props: ["graph"],
  data() {
    return {
      cell: null,
      view: null,
      type: null, // node edge textnode
      Range: 0,
      linkEdge: false,
      fontSize: 16,
      bgtypeList: bgtypeList,
      graphGridType: "",
      arrowTypeList: arrowTypeList,
      arrowType: "",
      editText: "",
      describeEdit: false, // 是否有描述节点
      textNodeBorder: false,
      nodeTextFontSize: 16,
      adapterNode: false, // 是否是连接器节点
    };
  },
  mounted() {
    this.graphGridType = this.graph.grid.grid.type;
  },
  methods: {
    init(cell, view, type) {
      this.clear();
      this.type = type;
      if (cell && view) {
        this.cell = cell;
        this.view = view;
      }

      type === "edge" && this.getEdgeStatus();
      if (type === "node") {
        try {
          const childerNode = this.getDescribeStatus();
          if (this.describeEdit) {
            // initText
            this.editText = childerNode.attrs.label.text;
            this.nodeTextFontSize = childerNode.attrs.label.style.fontSize * 1;
          }
        } catch (err) {
          console.log("Error:", err);
        }
      } else if (type === "textnode") {
        try {
          this.textNodeBorder = this.cell.getData().border || false;
          this.fontSize = this.cell.getData().fontSize || 16;
        } catch (err) {
          console.log("Error:", err);
        }
      }
    },
    getEdgeStatus() {
      if (this.cell.isEdge()) {
        let targetMarker = this.cell.attrs.line.targetMarker;
        this.arrowType = targetMarker; // 获取箭头类型
        if (
          Object.prototype.toString.call(targetMarker) === "[object Object]"
        ) {
          if (targetMarker.name === "") {
            this.arrowType = "nothing";
          }
        }
        let targetCell = this.cell.getTargetCell(); // 获取目标节点,如果链接的不是边不允许修改
        if (targetCell && targetCell.isEdge()) {
          this.linkEdge = true;
          return;
        }
      }
      this.linkEdge = false;
    },
    rangeInput() {
      this.linkEdge &&
        this.cell.prop("target/anchor", {
          name: "ratio",
          args: {
            ratio: this.Range / 100,
          },
        });
    },
    handle(data) {},
    handleGraph(e, type) {
      // 画布操作
      if (type === "clear") {
        this.graph.clearCells();
        this.$message.success("清空画布成功");
      } else if (type === "bgcolor") {
        this.graph.drawBackground({
          color: e.target.value,
        });
      } else if (type === "bgtype") {
        this.graph.showGrid();
        if (e === "dot") {
          this.graph.drawGrid({
            type: "dot",
            args: [
              {
                color: "#aaaaaa",
                thickness: 2,
              },
            ],
          });
        } else if (e == "doubleMesh") {
          this.graph.drawGrid({
            type: "doubleMesh",
            args: [
              {
                color: "#aaaaaa", // 主网格线颜色
                thickness: 1, // 主网格线宽度
              },
              {
                color: "#aaaaaa", // 次网格线颜色
                thickness: 2, // 次网格线宽度
                factor: 5, // 主次网格线间隔
              },
            ],
          });
        } else if (e === "mesh") {
          this.graph.drawGrid({
            type: "mesh",
            args: [
              {
                color: "#aaaaaa", // 网格线颜色
                thickness: 1, // 网格线宽度
              },
            ],
          });
        } else {
          this.graph.hideGrid();
        }
      } else if (type === "strokeColor") {
        this.cell.attr("line/stroke", e.target.value);
      } else if (type === "fontSize") {
        this.cell.setData({
          fontSize: e.target.value,
          textEditStatus: false,
        });
      } else if (type === "textBorder") {
        this.cell.setData({
          border: e || false,
          textEditStatus: false,
        });
      } else if (type === "edgeArrow") {
        if (this.cell.isEdge()) {
          if (this.arrowType === "nothing") {
            this.cell.attr({
              line: {
                targetMarker: {
                  name: "",
                },
              },
            });
            return;
          } else {
            this.cell.attr({
              line: {
                targetMarker: this.arrowType,
              },
            });
          }
        }
      }
    },
    // 编辑节点文本
    editCellText(e) {
      this.cell.setData({
        text: e.target.value,
      });
      this.editText = e.target.value;
    },
    changeNodeTextFontSize() {
      let childrenNode = null;
      if (this.cell.isNode()) {
        try {
          let Descendants = this.cell.getDescendants() || [];
          for (let c = 0; c < Descendants.length; c++) {
            let { describe } = Descendants[c].getData();
            if (describe) {
              childrenNode = Descendants[c];
              childrenNode.attr(
                "label/style/fontSize",
                this.nodeTextFontSize * 1
              );
              break;
            }
          }
        } catch (err) {
          console.log("ChilderNodeErr:", err);
        }
      }
    },
    getDescribeStatus() {
      if (this.cell) {
        try {
          this.describeEdit = this.cell.getData().createNodeDescribe || false;
          this.adapterNode = this.cell.getData().adapter || false;
          if (!this.cell.getDescendants) return;
          let cellChild = this.cell.getDescendants();
          if (cellChild && cellChild.length) {
            for (let i = 0; i < cellChild.length; i++) {
              if (cellChild[i].isNode() && cellChild[i].getData().describe) {
                return cellChild[i];
              }
            }
            this.describeEdit = false;
          }
        } catch (err) {
          console.log("Error:", err);
        }
      }
    },
    clear() {
      this.cell = null;
      this.view = null;
      this.type = null;
    },
  },
};
</script>
<style lang="less" scoped>
#manipulateview {
  width: 230px;
  height: 100%;
  background-color: #f1f3f4;
  overflow-y: auto;
  padding: 10px;
  box-sizing: border-box;
  .itemList {
    padding: 5px;
    width: 100%;
    .item {
      margin-bottom: 10px;
      width: 100%;
      .ant-row {
        width: 100%;
        display: flex;
        align-items: center;
      }
    }
  }
  .rangeInput {
    display: flex;
    justify-content: space-around;
    align-items: center;
  }
  .textCenter {
    margin-top: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
</style>
